<html>
	<head>
		<meta name="viewport"
			content="width=device-width,initial-scale=0.7, minimum-scale=0.5, maximum-scale=2.0, user-scalable=yes" />
		<link href="css/modle.css" rel="stylesheet" type="text/css" />
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
		<title>电气设备检查记录表</title>
		<script language="javascript" src="https://upcdn.b0.upaiyun.com/libs/jquery/jquery-2.0.2.min.js"></script>
	</head>
	<body>

		<table border="0" cellspacing="0" width="800px">
			<tr align="center">
				<td height="50px" colspan="5">
					<form>
						<select name="fixform"
							style="border: none;font-size: 25px;background: #FFFFFF;text-align: center;"
							onchange="window.location=this.value">
							<option value="ele.html">电气设备检查记录表</option>
							<option value="gatedoor.html">闸门检查记录表</option>
						</select>
					</form>
				</td>
			</tr>
		</table>
		<table border="1" cellspacing="0" width="800px">
			<tr align="center">
				<td width="100px">
					<div style="font-size: 20px;">检查项目</div>
				</td>
				<td width="100px">
					<div style="font-size: 20px;">检查内容与要求</div>
				</td>
				<td colspan="2" width="180px">
					<div style="font-size: 20px;">检查结果</div>
				</td>
				<td width="10px">
					<div style="font-size: 20px;">备注</div>
				</td>
				<td width="200px">
					<div style="font-size: 20px;">图片</div>
				</td>
			</tr>
			<tr>
				<td rowspan="3" align="center">电动机</td>
				<td align="left">电动机的外壳清洁，无灰尘、污垢、锈蚀；运行中无异常响声与振动。</td>

				<td width="60px">
					<div class="mui-input-row mui-checkbox ">
						正常<input name="C1" id="C1" type="checkbox" value="1" onclick="singleSelect(this)">
					</div>
				</td>
				<td width="75px">
					<div class="mui-input-row mui-checkbox ">
						不正常<input name="C1" id="C1" type="checkbox" value="0" onclick="singleSelect(this)">
					</div>
				</td>

				<td><textarea id="B1" style="border: none;"></textarea></td>

				<td>
					<input type="file" id="eleimg1" accept="image/*" style="width: 170px;">
				</td>
			</tr>
			<tr>
				<td>电动机检查周期应按设计要求或相关规范确定；电动机外壳接地牢固情况，接地电阻应符合规范技术要求。</td>

				<td width="60px">
					<div class="mui-input-row mui-checkbox ">
						正常<input name="C2" id="C2" type="checkbox" value="1" onclick="singleSelect(this)">
					</div>
				</td>
				<td width="75px">
					<div class="mui-input-row mui-checkbox ">
						不正常<input name="C2" id="C2" type="checkbox" value="0" onclick="singleSelect(this)">
					</div>
				</td>

				<td><textarea id="B2" style="border: none;"></textarea></td>

				<td>
					<input type="file" id="eleimg2" accept="image/*" style="width: 170px;">
				</td>

			</tr>
			<tr>
				<td>电动机绕组绝缘电阻值应满足绝缘等级的要求；电动机运行电流应在额定范围内。</td>

				<td width="60px">
					<div class="mui-input-row mui-checkbox ">
						正常<input name="C3" id="C3" type="checkbox" value="1" onclick="singleSelect(this)">
					</div>
				</td>
				<td width="75px">
					<div class="mui-input-row mui-checkbox ">
						不正常<input name="C3" id="C3" type="checkbox" value="0" onclick="singleSelect(this)">
					</div>
				</td>

				<td><textarea id="B3" style="border: none;"></textarea></td>

				<td>
					<input type="file" id="eleimg3" accept="image/*" style="width: 170px;">
				</td>
			</tr>
			<tr>
				<td rowspan="9">其他电气设备</td>
				<td>电力变压器日常检查每天至少1次，运行应平稳，在雷电、暴雨等特殊情况下应增加次数。</td>

				<td width="60px">
					<div class="mui-input-row mui-checkbox ">
						正常<input name="C4" id="C4" type="checkbox" value="1" onclick="singleSelect(this)">
					</div>
				</td>
				<td width="75px">
					<div class="mui-input-row mui-checkbox ">
						不正常<input name="C4" id="C4" type="checkbox" value="0" onclick="singleSelect(this)">
					</div>
				</td>

				<td><textarea id="B4" style="border: none;"></textarea></td>

				<td>
					<input type="file" id="eleimg4" accept="image/*" style="width: 170px;">
				</td>

			</tr>
			<tr>
				<td>每月定期检查配电柜，柜内线路接头及元器件插接应清洁、无松动及烧灼粘连等情况；各种开关、继电保护装置触点应接触良好，接头应牢靠连接。</td>

				<td width="60px">
					<div class="mui-input-row mui-checkbox ">
						正常<input name="C5" id="C5" type="checkbox" value="1" onclick="singleSelect(this)">
					</div>
				</td>
				<td width="75px">
					<div class="mui-input-row mui-checkbox ">
						不正常<input name="C5" id="C5" type="checkbox" value="0" onclick="singleSelect(this)">
					</div>
				</td>

				<td><textarea id="B5" style="border: none;"></textarea></td>

				<td>
					<input type="file" id="eleimg5" accept="image/*" style="width: 170px;">
				</td>
			</tr>
			<tr>
				<td>配电柜显示屏及显示按钮等的状态应正常，各种指示信号应完好，各种声光电保护装置应可靠有效。</td>

				<td width="60px">
					<div class="mui-input-row mui-checkbox ">
						正常<input name="C6" id="C6" type="checkbox" value="1" onclick="singleSelect(this)">
					</div>
				</td>
				<td width="75px">
					<div class="mui-input-row mui-checkbox ">
						不正常<input name="C6" id="C6" type="checkbox" value="0" onclick="singleSelect(this)">
					</div>
				</td>

				<td><textarea id="B6" style="border: none;"></textarea></td>

				<td>
					<input type="file" id="eleimg6" accept="image/*" style="width: 170px;">
				</td>
			</tr>
			<tr>
				<td>集控操作台的按钮、指示灯工作状态应正常。</td>

				<td width="60px">
					<div class="mui-input-row mui-checkbox ">
						正常<input name="C7" id="C7" type="checkbox" value="1" onclick="singleSelect(this)">
					</div>
				</td>
				<td width="75px">
					<div class="mui-input-row mui-checkbox ">
						不正常<input name="C7" id="C7" type="checkbox" value="0" onclick="singleSelect(this)">
					</div>
				</td>

				<td><textarea id="B7" style="border: none;"></textarea></td>

				<td>
					<input type="file" id="eleimg7" accept="image/*" style="width: 170px;">
				</td>
			</tr>
			<tr>
				<td>各种供电线路布置应规范，应无龟裂、绝缘层脱落及折断等现象。</td>

				<td width="60px">
					<div class="mui-input-row mui-checkbox ">
						正常<input name="C8" id="C8" type="checkbox" value="1" onclick="singleSelect(this)">
					</div>
				</td>
				<td width="75px">
					<div class="mui-input-row mui-checkbox ">
						不正常<input name="C8" id="C8" type="checkbox" value="0" onclick="singleSelect(this)">
					</div>
				</td>

				<td><textarea id="B8" style="border: none;"></textarea></td>

				<td>
					<input type="file" id="eleimg8" accept="image/*" style="width: 170px;">
				</td>
			</tr>
			<tr>
				<td>各种电气设备接地应可靠，防雷设施应完好。</td>

				<td width="60px">
					<div class="mui-input-row mui-checkbox ">
						正常<input name="C9" id="C9" type="checkbox" value="1" onclick="singleSelect(this)">
					</div>
				</td>
				<td width="75px">
					<div class="mui-input-row mui-checkbox ">
						不正常<input name="C9" id="C9" type="checkbox" value="0" onclick="singleSelect(this)">
					</div>
				</td>

				<td><textarea id="B9" style="border: none;"></textarea></td>

				<td>
					<input type="file" id="eleimg9" accept="image/*" style="width: 170px;">
				</td>
			</tr>
			<tr>
				<td>闸门开度仪、主令控制器及限位开关装置应准确可靠。</td>

				<td width="60px">
					<div class="mui-input-row mui-checkbox ">
						正常<input name="C10" id="C10" type="checkbox" value="1" onclick="singleSelect(this)">
					</div>
				</td>
				<td width="75px">
					<div class="mui-input-row mui-checkbox ">
						不正常<input name="C10" id="C10" type="checkbox" value="0" onclick="singleSelect(this)">
					</div>
				</td>

				<td><textarea id="B10" style="border: none;"></textarea></td>

				<td>
					<input type="file" id="eleimg10" accept="image/*" style="width: 170px;">
				</td>
			</tr>
			<tr>
				<td>户外柜箱应满足防雨、防潮要求。</td>

				<td width="60px">
					<div class="mui-input-row mui-checkbox ">
						正常<input name="C11" id="C11" type="checkbox" value="1" onclick="singleSelect(this)">
					</div>
				</td>
				<td width="75px">
					<div class="mui-input-row mui-checkbox ">
						不正常<input name="C11" id="C11" type="checkbox" value="0" onclick="singleSelect(this)">
					</div>
				</td>

				<td><textarea id="B11" style="border: none;"></textarea></td>

				<td>
					<input type="file" id="eleimg11" accept="image/*" style="width: 170px;">
				</td>
			</tr>
			<tr>
				<td>备用电源应可靠有效。</td>

				<td width="60px">
					<div class="mui-input-row mui-checkbox ">
						正常<input name="C12" id="C12" type="checkbox" value="1" onclick="singleSelect(this)">
					</div>
				</td>
				<td width="75px">
					<div class="mui-input-row mui-checkbox ">
						不正常<input name="C12" id="C12" type="checkbox" value="0" onclick="singleSelect(this)">
					</div>
				</td>

				<td><textarea id="B12" style="border: none;"></textarea></td>

				<td>
					<input type="file" id="eleimg12" accept="image/*" style="width: 170px;">
				</td>
			</tr>
			<tr>
				<td rowspan="4" align="center">仪表</td>
				<td>仪表执行机构与控制机构工作应正常。</td>

				<td width="60px">
					<div class="mui-input-row mui-checkbox ">
						正常<input name="C13" id="C13" type="checkbox" value="1" onclick="singleSelect(this)">
					</div>
				</td>
				<td width="75px">
					<div class="mui-input-row mui-checkbox ">
						不正常<input name="C13" id="C13" type="checkbox" value="0" onclick="singleSelect(this)">
					</div>
				</td>

				<td><textarea id="B13" style="border: none;"></textarea></td>

				<td>
					<input type="file" id="eleimg13" accept="image/*" style="width: 170px;">
				</td>
			</tr>
			<tr>
				<td>传感器表面应清洁，仪表显示应正常。</td>

				<td width="60px">
					<div class="mui-input-row mui-checkbox ">
						正常<input name="C14" id="C14" type="checkbox" value="1" onclick="singleSelect(this)">
					</div>
				</td>
				<td width="75px">
					<div class="mui-input-row mui-checkbox ">
						不正常<input name="C14" id="C14" type="checkbox" value="0" onclick="singleSelect(this)">
					</div>
				</td>

				<td><textarea id="B14" style="border: none;"></textarea></td>
				<td>
					<input type="file" id="eleimg14" accept="image/*" style="width: 170px;">
				</td>
			</tr>
			<tr>
				<td>仪表安装应牢固，现场保护箱应完好，仪表接线应牢固可靠。</td>

				<td width="60px">
					<div class="mui-input-row mui-checkbox ">
						正常<input name="C15" id="C15" type="checkbox" value="1" onclick="singleSelect(this)">
					</div>
				</td>
				<td width="75px">
					<div class="mui-input-row mui-checkbox ">
						不正常<input name="C15" id="C15" type="checkbox" value="0" onclick="singleSelect(this)">
					</div>
				</td>

				<td><textarea id="B15" style="border: none;"></textarea></td>

				<td>
					<input type="file" id="eleimg15" accept="image/*" style="width: 170px;">
				</td>
			</tr>
			<tr>
				<td>仪表供电和过电压保护装置应良好。</td>

				<td width="60px">
					<div class="mui-input-row mui-checkbox ">
						正常<input name="C16" id="C16" type="checkbox" value="1" onclick="singleSelect(this)">
					</div>
				</td>
				<td width="75px">
					<div class="mui-input-row mui-checkbox ">
						不正常<input name="C16" id="C16" type="checkbox" value="0" onclick="singleSelect(this)">
					</div>
				</td>

				<td><textarea type="text" name="C16" id="B16" style="border: none;"></textarea></td>

				<td>
					<input type="file" id="eleimg16" accept="image/*" style="width: 170px;">
				</td>
			</tr>
		</table>
		<table border="0" cellspacing="0" width="800px">
			<tr>
				<td border="0" cellspacing="0" height="80px"> 检查责任单位：<textarea id="dep"
						style="border-bottom: #000000 1px solid; height: 20px;width: 200px;" autofocus></textarea></td>
				<td border="0" cellspacing="0"> 检查日期：<input type="date" name="bday"></td>
			</tr>
		</table>
		<table border="0" cellspacing="0" width="800px">
			<tr>
				<td border="0" cellspacing="0" height="20px">检查人签名：</td>
			</tr>
		</table>


		<canvas id="canvas" width="800" height="200"
			style="display: block; border:1px solid #000000;">您的浏览器不支持canvas技术!</canvas>

		<table border="0" cellspacing="0" width="800px" height="60px">
			<td align="center" colspan="6" height="100px">
				<span id="clear">清空签名板</span>
				<span id="save">提交</span>
			</td>
		</table>

		<script language="javascript">
			var image = new Image();
			var jug = 0;
			var base64Image;

			function singleSelect(obj) {
				var objname = obj.name;
				var objs = document.getElementsByName(objname);
				if (obj.checked == true) {
					for (var i = 0; i < objs.length; i++) {
						objs[i].checked = false;
					}
					obj.checked = true;
				}
			}

			document.getElementById('save').onclick = function() {
				var sendCom = new Array();
				var sendCheck = new Array();
				var sendPic = new Array();
				//调用android程序中的方法，并传递参数
				for (i = 0; i < 16; i++) {
					var num = (1 + i).toString();
					sendCom[i] = document.getElementById("B" + num).value;
					if (document.getElementById("C" + num).checked)
						sendCheck[i] = document.getElementById("C" + num).value;
					else sendCheck[i] = "0"; //此处以后需要考虑如何判断空，防止未填写

					if (document.getElementById("eleimg" + num).value != "")
						sendPic[i] = "1";
					else sendPic[i] = "0";
				}
				writeCanvas.saveAsImg()
				//String image1 = image.src
				if (jug == 1) {
					//pic = base64Image;
					console.log(sendPic) //base64传不过去
					//image.src = '/pict.jpg'
					//window.AndroidWebView.showInfoFromJs(pic, sendCheck, sendCom, sendPic);
					window.AndroidWebView.showInfoFromJs(sendCheck, sendCom, sendPic);
				}
			}
			

			document.getElementById('clear').onclick = function() {
				writeCanvas.option.control.clearCanvas();
			};

	

			//写字板
			function WriteFont(id, options) {
				var self = this;
				this.canvas = document.getElementById(id);
				var obj = {
					canvas: this.canvas,
					context: this.canvas.getContext("2d"),
					isWrite: false, //是否开始
					canvasWidth: 800, //canvas宽高
					canvasHeight: 200,
					bgColor: '#fff', //背景色
					writeWidth: 2, //基础轨迹宽度
					maxWriteWidth: 3, // 写字模式最大线宽
					minWriteWidth: 1, // 写字模式最小线宽
					writeColor: '#000', // 轨迹颜色
					isWriteName: true //签名模式
				}

				for (var name in options) {
					obj[name] = options[name];
				}


				/**
				 * 绘制轨迹
				 */
				this.writing = function(point) {
					obj.context.beginPath();
					obj.context.moveTo(obj.lastPoint.x, obj.lastPoint.y);
					obj.context.lineTo(point.x, point.y);
					obj.context.lineWidth = obj.writeWidth;
					obj.context.stroke();
					obj.lastPoint = point;
					obj.context.closePath();
				}

				/**
				 * 轨迹样式
				 */
				this.writeContextStyle = function() {
					obj.context.beginPath();
					obj.context.strokeStyle = obj.writeColor;
					obj.context.lineCap = 'round';
					obj.context.lineJoin = "round";
				}

				/**
				 * 写开始
				 */
				this.writeBegin = function(point) {
					obj.isWrite = true;
					obj.lastPoint = point;
					self.writeContextStyle();
				}

				/**
				 * 写结束
				 */
				this.writeEnd = function() {
					obj.isWrite = false;
				}

				/**
				 * 清空画板
				 */
				this.canvasClear = function() {
					obj.context.save();
					obj.context.strokeStyle = '#ffffff';
					obj.context.clearRect(0, 0, obj.canvasWidth, obj.canvasHeight);
					if (obj.isShowBorder && !obj.isWriteName) {
						obj.context.beginPath();
						var size = obj.borderWidth / 2;
						//画外面的框
						obj.context.moveTo(size, size);
						obj.context.lineTo(obj.canvasWidth - size, size);
						obj.context.lineTo(obj.canvasWidth - size, obj.canvasHeight - size);
						obj.context.lineTo(size, obj.canvasHeight - size);
						obj.context.closePath();
						obj.context.lineWidth = obj.borderWidth;
						obj.context.strokeStyle = obj.borderColor;
						obj.context.stroke();
						//画里面的框
						obj.context.moveTo(0, 0);
						obj.context.lineTo(obj.canvasWidth, obj.canvasHeight);
						obj.context.lineTo(obj.canvasWidth, obj.canvasHeight / 2);
						obj.context.lineTo(obj.canvasWidth, obj.canvasHeight / 2);
						obj.context.lineTo(0, obj.canvasHeight / 2);
						obj.context.lineTo(0, obj.canvasHeight);
						obj.context.lineTo(obj.canvasWidth, 0);
						obj.context.lineTo(obj.canvasWidth / 2, 0);
						obj.context.lineTo(obj.canvasWidth / 2, obj.canvasHeight);
						obj.context.stroke();

					}
					obj.context.restore();
				}

				/**
				 * 保存图片 格式base64
				 */
				this.saveAsImg = function() {

					image.src = this.canvas.toDataURL("image/png");
					if (image.src == this.emptyCanvas) {
						alert('请先签名')
						return;
					} else {
						save.setAttribute('href',image);
						jug = 1;
						
					}
					base64Image = image.src;
					
					//console.log('提交的内容===>', image.src)

				};

				/**
				 * 初始化画板
				 */
				this.canvasInit = function() {
					this.canvas.width = obj.canvasWidth;
					this.canvas.height = obj.canvasHeight;
					this.emptyCanvas = this.canvas.toDataURL("image/png");
				}

				/**======================事件绑定===========================**/


				this.canvas.addEventListener('mousedown', function(e) {
					var point = {
						x: e.offsetX || e.clientX,
						y: e.offsetY || e.clientY
					};
					self.writeBegin(point);
				});

				this.canvas.addEventListener('mouseup', function(e) {
					var point = {
						x: e.offsetX,
						y: e.offsetY
					};
					self.writeEnd(point);
				});

				this.canvas.addEventListener('mouseleave', function(e) {
					var point = {
						x: e.offsetX,
						y: e.offsetY
					};
					self.writeEnd(point);
				});

				this.canvas.addEventListener('mousemove', function(e) {
					if (obj.isWrite) {
						var point = {
							x: e.offsetX,
							y: e.offsetY + 20
						};
						//point = {x: + 0  ,y: + 50};
						self.writing(point);
						//console.log(point);
					}
				});


				//移动端
				this.canvas.addEventListener('touchstart', function(e) {
					var touch = e.targetTouches[0];
					var point = {
						x: touch.pageX || touch.clientX,
						y: touch.pageY - 1870 || touch.clientY - 1870 //偏移量
					};

					self.writeBegin(point);
				});
				this.canvas.addEventListener('touchend', function(e) {
					var touch = e.changedTouches[0];
					var point = {
						x: touch.pageX,
						y: touch.pageY - 1870
					};
					self.writeEnd(point);
				});
				this.canvas.addEventListener('touchmove', function(e) {
					var touch = e.targetTouches[0];
					var point = {
						x: touch.pageX,
						y: touch.pageY - 1870
					};
					self.writeEnd(point);
				});
				this.canvas.addEventListener('touchmove', function(e) {
					var touch = e.targetTouches[0];
					var point = {
						x: touch.pageX,
						y: touch.pageY - 1870
					};
					e.preventDefault();
					self.writing(point);
				}, {
					passive: false
				}, );


				// , { passive: false }
				//             self.writing(point);
				//         });

				this.canvasInit();
				this.canvasClear();

				this.option = obj;
				obj.control = {
					clearCanvas: self.canvasClear
				};

			}

			/**
			 * 初始化调用
			 * 设置参数
			 */
			var writeCanvas = new WriteFont('canvas', {
				//borderWidth: 100,
				writeWidth: 3,
				borderColor: '#ff6666',
				isWriteName: true //签名模式
			});
		</script>
	</body>
</html>
